<template>
  <div class="pagebox">
    <div>
      <div class="box">
        <div class="leftBox bg">
          <a-menu
            :theme="theme ? 'light' : 'dark'"
            :default-selected-keys="activeIndex"
            mode="horizontal"
            @click="menuHandle"
          >
            <a-menu-item key="log">查看日志</a-menu-item>
            <a-menu-item key="parm">查看参数</a-menu-item>
            <!-- <a-menu-item key="all">全部文件</a-menu-item> -->
          </a-menu>
        </div>
        <div class="rightBox">
          <a-row v-if="menuPath != 'all'">
            <a-collapse :defaultActiveKey="defaultActiveKey" class="bg" accordion v-if="fileGroupLists.length > 0">
              <a-collapse-panel
                :header="group.name"
                :key="group.name"
                :name="group.name"
                v-for="(group) in fileGroupLists"
              >
                <a-row class="bg">
                  <a-col :span="3" :xl="4" class="cardbox" v-for="(item, index) in group.list" :key="index">
                    <div class="innerBox bg">
                      <div class="body">
                        <div class="fileNameBox">
                          <div class="iconBox">
                            <i class="el-icon-document"></i>
                          </div>
                          <div class="fileName colorin">{{ item.fileName }}</div>
                        </div>
                        <div class="info">
                          <div class="time">
                            {{ item.changeTime }}
                          </div>
                          <div class="size">
                            {{ item.size }}
                          </div>
                        </div>
                      </div>
                      <div class="footer">
                        <!-- <div class="button" @click="downloadFile(item)">
                          <a-tooltip placement="top">
                            <template slot="title">下载</template>
                            <a-button type="text">
                              <a-icon type="vertical-align-bottom" class="colorin" />
                            </a-button>
                          </a-tooltip>
                        </div> -->
                        <div class="button" @click="previewFile(item)">
                          <a-tooltip placement="top">
                            <template slot="title">预览</template>
                            <a-button type="text">
                              <a-icon type="eye" class="colorin" />
                            </a-button>
                          </a-tooltip>
                        </div>
                      </div>
                    </div>
                  </a-col>
                </a-row>
              </a-collapse-panel>
            </a-collapse>
            <div class="tipsDiv" v-else>{{ tipsMsg }}</div>
          </a-row>

          <a-row v-if="menuPath == 'all'">
            <a-col :span="24">
              <div class="pathBox">
                <div class="item back" @click="dirBack()" v-show="isShowdirBack">
                  <a-tooltip effect="dark" placement="bottomLeft">
                    <template slot="title">返回上一级</template>
                    <a-icon type="arrow-left" />
                  </a-tooltip>
                </div>
                <div class="item">
                  <a-breadcrumb>
                    <a-breadcrumb-item v-for="(item, index) in dirPathAry" :key="index">{{ item }}</a-breadcrumb-item>
                  </a-breadcrumb>
                </div>
                <div class="item end" v-show="isShowdirBack" style="text-align: right;">
                  <a-button type="primary" size="small" @click="openUploadDialog">上传文件</a-button>
                </div>
              </div>
            </a-col>
            <a-col :span="24">
              <a-table
                class="fileTable"
                :columns="columns"
                :data-source="tableData"
                :pagination="false"
                :rowKey="
                  (record, index) => {
                    return index;
                  }
                "
              >
                <template slot="name" slot-scope="text, record">
                  <div v-if="record.fileType == 'file'">
                    <i class="el-icon-document"></i>
                    <span style="margin-left: 10px">{{ text }}</span>
                  </div>
                  <div v-if="record.fileType == 'dir'" @click="selectDir(record)">
                    <i class="el-icon-folder"></i>
                    <span style="margin-left: 10px; text-decoration: underline; cursor: pointer">{{ text }}</span>
                  </div>
                </template>

                <template slot="operation" slot-scope="text, record">
                  <a-button type="text" v-if="record.fileType == 'file' && lastDirPath == 'log'">
                    <a-icon type="eye" @click="ssbtn(record)" class="colorin" />
                  </a-button>
                  <a-tooltip class="item" effect="dark" content="下载日志" placement="top">
                    <template slot="title">下载日志</template>
                    <a-button type="text" v-if="record.fileType == 'file'" @click="sendMessage(record)">
                      <a-icon class="colorin" type="vertical-align-bottom" />
                    </a-button>
                  </a-tooltip>
                </template>
              </a-table>
            </a-col>
          </a-row>
        </div>
      </div>
    </div>
    <a-modal
      title="预览"
      v-model="previewDialogVisible"
      @ok="() => setModal1Visible(false)"
      @cancel="() => setModal1Visible(false)"
    >
      <a-input
        type="textarea"
        :auto-size="{ minRows: 18, maxRows: 20 }"
        placeholder="请输入内容"
        :disabled="true"
        :loading="previewLoading"
        v-model="previewStr"
      ></a-input>
    </a-modal>

    <UploadDialog
      :openDialog.sync="isUploadDialog"
      title="上传文件"
      @closeDialogRefreshData="refreshData"
    ></UploadDialog>
  </div>
</template>

<script>
import api from '@/api/deviceInfo';
import Paho from 'paho-mqtt';

import UploadDialog from './components/uploadDialog';

const publicPath = '/h/lnc8';
const columns = [
  {
    title: '文件名',
    dataIndex: 'name',
    key: 'name',
    scopedSlots: { customRender: 'name' },
  },
  {
    title: '修改日期',
    dataIndex: 'modifyTime',
    key: 'modifyTime',
  },
  {
    title: '文件大小',
    dataIndex: 'size',
    key: 'size',
  },
  {
    title: '操作选项',
    dataIndex: 'operation',
    key: 'operation',
    scopedSlots: { customRender: 'operation' },
  },
];
const logPageGroup = [
  {
    title: '机床操作日志',
    value: 'CNC',
    lists: [],
  },
  {
    title: '机床断电日志',
    value: 'POWER',
    lists: [],
  },
  {
    title: 'API日志',
    value: 'API',
    lists: [],
  },
  {
    title: '云数控日志',
    value: 'Hnc',
    lists: [],
  },
];

const parmPageGroup = [
  {
    title: 'CFG',
    value: 'CFG',
    lists: [],
  },
  {
    title: 'PARM',
    value: 'PARM',
    lists: [],
  },
  {
    title: 'SERV',
    value: 'SERV',
    lists: [],
  },
  {
    title: 'CLOSED',
    value: 'CLOSED',
    lists: [],
  },
];

function mqttSend(publishTopic, subscribeTopic, payload, _this) {
  let qos = 0;
  let { client } = _this;
  client.publish(publishTopic, JSON.stringify(payload), qos);
  client.subscribe(subscribeTopic);
}

// Generate four random hex digits.
function S4() {
  return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
}

// Generate a pseudo-GUID by concatenating random hexadecimal.
function guid() {
  return S4() + S4() + '-' + S4() + '-' + S4() + '-' + S4() + '-' + S4() + S4() + S4();
}

function download(url) {
  let a = document.createElement('a');
  a.href = url;
  a.click();
}

async function previewFile(url, _this) {
  let response = await fetch(url);
  _this.previewStr = await response.text();
  console.log(_this.previewStr);
  _this.previewLoading = false;
}

function formatTableData(item) {
  let _item = item;
  if (_item.size == '') {
    _item.size = '-';
  } else {
    if (_item.size < 1048576) {
      _item.size = (_item.size / 1024).toFixed(2) + 'KB';
    } else if (_item.size > 1048576 && _item.size < 1073741824) {
      _item.size = (_item.size / 1024 / 1024).toFixed(2) + 'MB';
    } else if (_item.size > 1073741824) {
      _item.size = (_item.size / 1024 / 1024 / 1024).toFixed(2) + 'GB';
    }
  }
  return _item;
}

function filerFileData(lists, suffixName) {
  let _lists = [];
  lists.forEach((item, index) => {
    let itemSuffixNameIndex = item.name.lastIndexOf('.');
    let itemSuffixName = item.name.substr(itemSuffixNameIndex + 1);
    let isOk = itemSuffixName.toLowerCase() == suffixName;
    if (isOk) {
      let _item = formatData(item);
      _lists.push(_item);
    }
  });

  return _lists;

  function formatData(item) {
    let _item = item;
    if (_item.modifyTime) {
      _item.modifyTime = _item.modifyTime.split(' ')[0];
    }
    if (_item.size == '') {
      _item.size = '-';
    } else {
      if (_item.size < 1048576) {
        _item.size = (_item.size / 1024).toFixed(1) + 'KB';
      } else if (_item.size > 1048576 && _item.size < 1073741824) {
        _item.size = (_item.size / 1024 / 1024).toFixed(1) + 'MB';
      } else if (_item.size > 1073741824) {
        _item.size = (_item.size / 1024 / 1024 / 1024).toFixed(1) + 'GB';
      }
    }

    return _item;
  }
}

export default {
  name: 'board',
  components: {
    UploadDialog,
  },
  data() {
    return {
      columns: columns,
      activeIndex: ['log'],
      cardLists: [],
      previewDialogVisible: false,
      previewLoading: true,
      isUploadDialog: false,
      previewStr: '',
      handleType: '',
      menuPath: 'log',
      suffixName: 'log',
      activeNames: ['CNC', 'CFG', '机床操作日志'],
      type: 'LOG',
      tipsMsg: '',
      defaultActiveKey: 'LOG',
      fileGroupLists: [],
      client: {},
      dirPath: publicPath,
      tableData: [],
      macsn: '',
      clientId: `client-hzsk-${guid()}`,
      MQTToption: {},
    };
  },
  computed: {
    dirPathAry: function() {
      return this.dirPath.split('/').slice(1);
    },
    isShowdirBack: function() {
      let length = this.dirPath.split('/').slice(1).length;
      return length > 2 ? true : false;
    },
    lastDirPath: function() {
      let dirPath = this.dirPath.substring(this.dirPath.lastIndexOf('/') + 1);
      return dirPath;
    },
    theme: function() {
      return this.$store.getters.thisTheme;
    },
  },

  methods: {
    setModal1Visible(tag) {
      this.previewDialogVisible = tag;
    },
    handleChange() {},
    menuHandle(value) {
      // this.menuPath = value.key;
      // switch (value.key) {
      //   case 'log':
      //     this.suffixName = 'log';
      //     break;
      //   case 'parm':
      //     this.suffixName = 'xml';
      //     break;
      //   case 'all':
      //     this.suffixName = '';
      //     break;
      //   default:
      //     break;
      // }

      // let _this = this;
      // let payload = {
      //   equipment: _this.macsn,
      //   type: 'dir',
      //   dirPath: value.key == 'all' ? `${publicPath}` : `${publicPath}/${value.key}`,
      //   guid: _this.clientId,
      // };
      // let { publishTopic, subscribeTopic } = _this.MQTToption;
      // mqttSend(publishTopic, subscribeTopic, payload, _this);

      this.menuPath = value.key;
      switch (value.key) {
        case 'log':
          this.suffixName = 'log';
          this.type = 'LOG'
          break;
        case 'parm':
          this.suffixName = 'xml';
          this.type = 'PARAMETER'
          break;
        case 'all':
          this.suffixName = '';
          break;
        default:
          break;
      }

      this.fileGroupLists = []
      if(this.menuPath != 'all') {
        this.getAllLog()
      }
    },
    downloadFile(item) {
      let _this = this;
      let payload = {
        equipment: this.macsn,
        type: 'file',
        filePath: `${this.dirPath}/${item.name}`,
        guid: this.clientId,
      };
      let { publishTopic, subscribeTopic } = _this.MQTToption;
      mqttSend(publishTopic, subscribeTopic, payload, _this);
    },
    previewFile(item) {
      this.previewDialogVisible = true;
      this.previewLoading = true;
      this.handleType = 'preview';
      // let _this = this;
      // let payload = {
      //   equipment: this.macsn,
      //   type: 'file',
      //   filePath: `${this.dirPath}/${item.name}`,
      //   guid: this.clientId,
      // };
      // let { publishTopic, subscribeTopic } = _this.MQTToption;
      // mqttSend(publishTopic, subscribeTopic, payload, _this);
      
      this.previewStr = ''
      this.getAllLogInfo(item)
    },
    // called when the client connects
    onConnect() {
      let _this = this;
      let payload = {
        equipment: _this.macsn,
        type: 'dir',
        dirPath: `${_this.dirPath}/log`,
        guid: _this.clientId,
      };
      let { publishTopic, subscribeTopic } = _this.MQTToption;
      mqttSend(publishTopic, subscribeTopic, payload, _this);
    },
    // called when the client loses its connection
    onConnectionLost(responseObject) {
      console.log('------------------onConnectionLost');
      console.log(responseObject);
      let _this = this;
      let { errorCode } = responseObject;

      switch (errorCode) {
        case 8:
          _this.$warning({
            title: '连接超时',
            content: '长时间无操作与服务器连接断开,请点击确认按钮,重新连接',
            onOk() {
              client.connect({ onSuccess: this.onConnect, timeout: 180 });
            },
          });
          break;
        default:
          break;
      }
    },

    // called when a message arrives
    onMessageArrived(message) {
      console.log('------------------onMessageArrived');
      console.log(message);
      let _this = this;
      let { payloadString } = message;
      let payload = JSON.parse(payloadString);
      let { type, data, url, equipment, msg, result } = payload;

      switch (type) {
        case 'dirResponse':
          if (data != undefined) {
            let { dirPath, files } = data;
            _this.dirPath = dirPath;
            let _fileGroupLists = filerFileData(files, _this.suffixName);

            if (_this.menuPath == 'all') {
              _this.tableData = files.map((item) => formatTableData(item));
              console.log('_this.tableData');
              console.log(_this.tableData);
            } else if (_this.menuPath == 'log') {
              _this.fileGroupLists = buildGroup(_fileGroupLists, logPageGroup);
            } else if (_this.menuPath == 'parm') {
              _this.fileGroupLists = buildGroup(_fileGroupLists, parmPageGroup);
            }

            function buildGroup(lists, groupLists) {
              let _lists = groupLists.map((group) => {
                let _group = JSON.parse(JSON.stringify(group));
                lists.forEach((item, index) => {
                  if (item.name.indexOf(group.value) > -1) {
                    _group.lists.push(item);
                  }
                });
                return _group;
              });
              return _lists;
            }
          }
          break;
        case 'fileResponse':
          if (_this.handleType == 'preview') {
            previewFile(url, _this);
          } else {
            download(url);
          }
          break;
        case 'fileDownloadResponse':
          if (equipment == _this.macsn || result == 0) {
            _this.$message.info('文件上传成功');

            let fileDownloadPayload = {
              equipment: _this.macsn,
              type: 'dir',
              dirPath: _this.dirPath,
              guid: _this.clientId,
            };
            let { publishTopic, subscribeTopic } = _this.MQTToption;
            mqttSend(publishTopic, subscribeTopic, fileDownloadPayload, _this);
          } else {
            _this.$message.error('文件上传失败');
            _this.$message.error(msg);
          }
          break;
        default:
          break;
      }
    },
    sendMessage(item) {
      //  console.log("MQTToption");
      let client = this.client;
      let MQTToption = this.MQTToption;
      let { publishTopic } = MQTToption;
      //       console.log("publishTopic", publishTopic);
      //  console.log("MQTToption", MQTToption);
      let payload = {
        equipment: this.macsn,
        type: 'file',
        filePath: `${this.dirPath}/${item.name}`,
        guid: this.clientId,
      };
      // console.log(payload)
      let qos = 0;
      client.publish(publishTopic, JSON.stringify(payload), qos);
    },
    selectDir(item) {
      console.log(item);
      let _this = this;
      let payload = {
        equipment: this.macsn,
        type: 'dir',
        dirPath: `${this.dirPath}/${item.name}`,
        guid: this.clientId,
      };
      let { publishTopic, subscribeTopic } = _this.MQTToption;
      mqttSend(publishTopic, subscribeTopic, payload, _this);
    },
    dirBack() {
      let _this = this;
      let dirPath = this.dirPath.substring(0, this.dirPath.lastIndexOf('/'));
      let payload = {
        equipment: this.macsn,
        type: 'dir',
        dirPath: dirPath,
        guid: this.clientId,
      };

      let { publishTopic, subscribeTopic } = _this.MQTToption;
      mqttSend(publishTopic, subscribeTopic, payload, _this);
    },

    openUploadDialog() {
      this.isUploadDialog = true;
    },

    // 推送上传文件的URL地址
    sendFileUrl(fileName, url, md5) {
      let _this = this;
      let dirPath = this.dirPath.substring(0, this.dirPath.lastIndexOf('/'));
      let payload = {
        url,
        type: 'fileDownload',
        filePath: `${this.dirPath}/${fileName}`,
        guid: this.clientId,
        equipment: this.macsn,
        md5,
      };
      let { publishTopic, subscribeTopic } = _this.MQTToption;
      mqttSend(publishTopic, subscribeTopic, payload, _this);
    },

    refreshData(payload) {
      let { fileName, url, md5 } = payload;
      this.sendFileUrl(fileName, url, md5);
    },

    // 时间倒序
    compare(prop) {
      return function(a, b) {
        var value1 = a[prop];
        var value2 = b[prop];
        return new Date(value2) - new Date(value1);
      }
    },
    // 获取日志列表
    async getAllLog() {
      let params = {
        macSN: this.macsn,
        type: this.type
      }
      const res = await api.getAllLog(params);
      if(res.MsgCode == 0) {
        let data = JSON.parse(res.Data)
        if(data.code == 0) {
          // this.fileGroupLists = data.data
          data.data = data.data.sort(this.compare('changeTime'))

          if(this.type == 'LOG') {
            let newList = []
            let logList = []
            let iniList = []
            for(var item of data.data) {
              if(item.fileName.substr(-3) == 'LOG') {
                logList.push(item)
              }
              if(item.fileName.substr(-3) == 'ini') {
                iniList.push(item)
              }
            }
            if(logList.length > 0) {
              newList.push({
                name: 'LOG',
                list: logList
              })
            }
            if(iniList.length > 0) {
              newList.push({
                name: 'ini',
                list: iniList
              })
            }
            this.fileGroupLists = newList
          } else {
            let newList = []
            let datList = []
            let xmlList = []
            let strList = []
            for(var item of data.data) {
              if(item.fileName.substr(-3) == 'DAT') {
                datList.push(item)
              }
              if(item.fileName.substr(-3) == 'XML') {
                xmlList.push(item)
              }
              if(item.fileName.substr(-3) == 'STR') {
                strList.push(item)
              }
            }
            if(datList.length > 0) {
              newList.push({
                name: 'DAT',
                list: datList
              })
            }
            if(xmlList.length > 0) {
              newList.push({
                name: 'XML',
                list: xmlList
              })
            }
            if(strList.length > 0) {
              newList.push({
                name: 'STR',
                list: strList
              })
            }
            this.fileGroupLists = newList
          }
          this.defaultActiveKey = this.fileGroupLists[0].name
        } else {
          this.fileGroupLists = []
          this.tipsMsg = data.msg
        }
      }
    },
    // 获取日志（参数）文件详细内容 
    // async getAllLogInfo(item) {
    //   let curLength = 0
    //   if(item.size.substr(-2) == 'kb') {
    //     curLength = parseInt(item.size) * 1024
    //   } else {
    //     curLength = parseInt(item.size)
    //   }
    //   let params = {
    //     fileName: item.fileName,
    //     length: curLength,
    //     offset: 0,
    //     sn: this.macsn,
    //     type: this.type
    //   }
    //   const res = await api.getAllLogInfo(params);
    //   this.previewLoading = false;
    //   if(res.MsgCode == 0) {
    //     let data = JSON.parse(res.Data)
    //     if(data.code == 0) {
    //       this.previewStr = data.data
    //     }
    //   } else {
    //     this.previewStr = res.MsgDesc
    //   }
    // },
    // 获取日志（参数）文件详细内容 
    async getAllLogInfo(item) {
      this.previewStr = ''
      if(item.size.substr(-2) == 'kb') {
        let curLength = parseInt(item.size) * 1024
        if(curLength <= 131072) {
          let offset = 0
          this.getInfo(item, curLength, offset)
        } else {
          let len = 0
          if((curLength % 131072) > 0) {
            len = parseInt(curLength / 131072) + 1
          } else {
            len = parseInt(curLength / 131072)
          }
          for(let i=0;i<len;i++) {
            let oneLength = 131072
            let offset = 0
            if(i == 0) {
              offset = 0
            } else {
              offset = 131072 * i + 1
            }
            this.getInfo(item, oneLength, offset)
          }
        }
      } else {
        let curLength = parseInt(item.size)
        let offset = 0
        this.getInfo(item, curLength, offset)
      }
      
    },
    // 获取详情
    async getInfo(item, curLength, offset) {
      let params = {
        fileName: item.fileName,
        length: curLength,
        offset: offset,
        sn: this.macsn,
        type: this.type
      }
      const res = await api.getAllLogInfo(params);
      this.previewLoading = false;
      if(res.MsgCode == 0) {
        let data = JSON.parse(res.Data)
        if(data.code == 0) {
          this.previewStr += data.data
        }
      } else {
        this.previewStr = res.MsgDesc
      }
    }
  },

  mounted() {
    let _this = this;
    let MQTToption = {
      url: this.$mqttUrl,
      clientId: this.clientId,
      timeout: 10 * 1000,
      keepAliveInterval: 10,
      cleanSession: false,
      ssl: false,
      diviceID: 'macsn',
      publishTopic: `CloudQuery/${this.macsn}`,
      subscribeTopic: `CloudQueryResponse/${this.clientId}`,
    };
    this.MQTToption = MQTToption;

    let { url, clientId, publishTopic, subscribeTopic } = MQTToption;

    let client = new Paho.Client(url, clientId);

    // let client = new Paho.Client('27.17.57.163', 8083, clientId);

    this.client = client;
    // set callback handlers
    client.onConnectionLost = this.onConnectionLost;
    client.onMessageArrived = this.onMessageArrived;

    // connect the client
    client.connect({
      onSuccess: this.onConnect,
      keepAliveInterval: 30,
      timeout: 180,
    });

    // 获取日志列表
    this.getAllLog()
  },
  created() {
    this.macsn = this.$route.query.macsn;
    // this.macsn="2CBF1499AFF3716"
  },
};
</script>

<style scoped="scoped" lang="less">
.pathBox {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 8px;
}

.pathBox .item {
  padding-left: 8px;
}

.pathBox .item.end {
  flex: 1;
}

.pathBox .back {
  width: 32px;
  text-align: left;
  cursor: pointer;
}

.box {
  width: 100%;
  /* height: 740px; */
  height: 94vh;
  /* display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start; */
}

.leftBox {
  width: 100%;
  overflow: auto;
}

.rightBox {
  /* flex: 1; */
  width: 100%;
  height: 88%;
  overflow-x: hidden;
  overflow-y: scroll;
  padding: 16px;
  .tipsDiv {
    font-size: 20px;
    font-weight: bolder;
    padding: 20px;
    background: #fff;
  }
}

.cardbox {
  padding: 8px;
  height: 240px;
  cursor: pointer;
}

.innerBox {
  width: 100%;
  height: 100%;
  border: 1px solid #e8e8e8;
}

.innerBox:hover {
  box-shadow: 6px 6px 4px 2px #969696;
}

.innerBox .body .fileNameBox {
  width: 100%;
}

.innerBox .body .iconBox {
  height: 60px;
  line-height: 60px;
  font-size: 48px;
  font-weight: 400;
  color: #141414;
  text-align: center;
  margin-top: 20px;
}

.innerBox .body .fileName {
  height: 40px;
  line-height: 20px;
  word-wrap: break-word;
  word-break: normal;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 200;
  text-align: center;
  color: #141414;
  margin: 20px;
  padding: 0px 8px;
}

.innerBox .body .info {
  height: 24px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #646464;
}

.innerBox .body .info .size {
  width: 64px;
  height: 24px;
  line-height: 24px;
  text-align: center;
}

.innerBox .body .info .time {
  flex: 1;
  height: 24px;
  line-height: 24px;
  text-align: center;
}

.innerBox .footer {
  height: 40px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}

.innerBox .footer .button {
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border: 1px solid #e8e8e8;
  border-left: none;
}

.innerBox .footer .button:last-child {
  border-right: none;
}

.innerBox .footer .button:hover {
  background-color: #e2e2e2;
}

/deep/ .el-textarea.is-disabled .el-textarea__inner {
  color: #424242;
}
.fileTable /deep/ .ant-btn,
.footer /deep/ .ant-btn {
  border: 0 !important;
  background-color: rgba(0, 0, 0, 0);
}
</style>

